import React from "react";
import { useNavigate } from "react-router-dom";
import "./index.css";

export default function Index(props) {
  const bookDetail = props.bookDetail;
  const deleteBook = props.deleteBook;
  const navigate = useNavigate();
  function formatTimeStamp(timeStamp) {
    const date=new Date(timeStamp);
    return timeStamp!==undefined?dateFormat("YYYY-mm-dd HH:MM", date):undefined;
  }
  function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length === 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}
  return (
    <div className="bookItem">
      <div className="cover">
        <div className="bubble-aprox"></div>
        <div className="bubble">
          <span className="bubble__icon">D</span>
          <div
            className="bubble__content"
            onClick={(e) => {
              deleteBook(bookDetail.bookName);
            }}
          >
            Delete
          </div>
        </div>
        <div
          className="detailBox"
          onClick={() => {
            navigate(`/book/${bookDetail.bookName}`);
          }}
        >
          <p>{bookDetail.bookName}</p>
          <p>{bookDetail.author}</p>
          <p>{formatTimeStamp(bookDetail.createTime)}</p>
          <p>{bookDetail.updateTime}</p>
        </div>
      </div>
    </div>
  );
}
